<template>
	<view class="page">
		<star-nav :type="3" :listType="1" title="投入积分排行" icon="/static/icon-images/rocket.png"></star-nav>
		<view class="content">
			<view class="headerArr">
				<view @click="itemClick(index)" :class="index==indexID?'active_headerArrItems':'headerArrItems'" v-for="(item,index) in arr" :key="index">{{item}}</view>
			</view>
			<view class="top-box">
				<view class="tit-1">排名</view>
				<view class="tit-2">用户</view>
				<view class="tit-3">积分</view>
			</view>
			
			<scroll-view scroll-y="true" class="scroll">
				<view class="rank-group">
					<view v-if="list.length>0" class="rank-list" v-for="(item, index) in list" :key="index" :class="getRankClass(index + 1)">
						<!-- 左侧：排名+头像+信息 -->
						<view class="rank-left">
							<view class="rank-number-box">
								<text class="rank-number">{{ index + 1 }}</text>
							</view>
							<!-- <view>{{imgUrl+item.avatarUrl}}</view> -->
							<view class="rank-avar-box">
								<image   class="rank-avar" :src="imgUrl+item.avatarUrl" mode="aspectFill">
								</image>
							</view>
							<view class="rank-msg">
								<view class="rank-name">{{item.nickname || '匿名'}}</view>
								<view class="rank-id">ID：{{item.idNumber || '000000'}}</view>
							</view>
						</view>

						<!-- 右侧：积分 -->
						<view class="rank-point">
							{{item.points || 0}}
						</view>
					</view>
					<view v-if="list.length==0" class="none">
						暂无信息
					</view>
				</view>
			</scroll-view>
			
		</view>
		<pointsVue :show="isPoints" @success="handlePoints"/>
		<view class="InputPoints" @click="pointsClick">
			投入
		</view>
	</view>
</template>

<script>
	import pointsVue from './components/points/index.vue'
	import config from '@/config'
	import {todayRankingList,yesterdayRankingList} from '@/api/index.js'
	export default {
		components:{
			pointsVue
		},
		data(){
			return{
				imgUrl:config.uploadUrl,
				arr:['今日排行','昨日排行'],
				indexID:0,
				list:[],
				isPoints:false
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			handlePoints(){
				this.isPoints = false
				this.getList()
			},
			pointsClick(){
				this.isPoints = true
			},
			imgErr(index){
				this.list[index].isShow = false
			},
			async getList(){
				if(this.indexID==0){
					let res =  await todayRankingList()
					this.list = res.data.rankingList
				}
				if(this.indexID==1){
					let res =  await yesterdayRankingList()
					this.list = res.data.rankingList
				}
			},
			itemClick(index){
				this.indexID = index
				this.getList()
			},
			getRankClass(rank) {
				if (rank === 1) return 'first';
				if (rank === 2) return 'second';
				if (rank === 3) return 'third';
				return 'common';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.InputPoints{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100rpx;
		font-size: 32rpx;
		position: absolute;
		bottom: 100rpx;
		right: 60rpx;
		border: 2rpx solid #FFCA12;
		color: #FFFFFF;
		font-weight: bold;
	}
	.none{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color:#FFFFFF;
		opacity: 0.8;
	}
	.active_headerArrItems{
		width: 345rpx;
		height: 95rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #29252F;
		border-radius: 20rpx;
		border: 1rpx solid #252950;
		color:#FFE135;
	}
	.headerArrItems{
		width: 345rpx;
		height: 95rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #171939;
		border-radius: 20rpx;
		border: 1rpx solid #252950;
	}
	.headerArr{
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	// ===== 全局字体设置（推荐引入 Inter 或 JetBrains Mono 增强科技感）=====
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Orbitron:wght@600;700&display=swap');

	$font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	$font-digit: 'Orbitron', 'Courier New', monospace;

	$page-bg-start: #0a0f2c; // 深邃星空蓝
	$page-bg-end: #1a143d; // 紫黑色宇宙深处
	$text-light: #ffffff;
	$text-gray: #b0c4de; // 银河灰蓝文字
	$border-alpha: rgba(138, 155, 255, 0.2);

	// 主题色定义
	$gold-glow: linear-gradient(135deg, #ffeb3b, #ffc107);
	$silver-glow: linear-gradient(135deg, #e0e0e0, #cccccc);
	$bronze-glow: linear-gradient(135deg, #ff9800, #f57c00);
	$common-bg: linear-gradient(135deg, #2d3748, #4a5568);

	.page {
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, $page-bg-start 0%, $page-bg-end 100%);
		font-family: $font-main;
		color: $text-light;
		overflow: hidden;
	}

	.content {
		padding: 20rpx;
	}

	.scroll {
		margin-top: 20rpx;
		width: 100%;
		height: calc(100vh - 580rpx);
	}

	.rank-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	/* --- 顶部标题栏美化 --- */
	.top-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background: rgba(30, 41, 70, 0.6);
		border-radius: 24rpx;
		border: 1px solid $border-alpha;
		padding: 24rpx 36rpx;
		color: $text-gray;
		font-weight: 600;
		font-size: 32rpx;

		.tit-1 {
			width: 120rpx;
			text-align: left;
		}

		.tit-2 {
			flex: 1;
		}

		.tit-3 {
			width: 180rpx;
			text-align: right;
		}
	}

	.rank-list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 28rpx;
		padding: 24rpx 36rpx;
		box-sizing: border-box;
		background: rgba(25, 32, 58, 0.5);
		border: 1px solid rgba(138, 155, 255, 0.15);
		box-shadow:
			0 10rpx 30rpx rgba(0, 0, 0, 0.3),
			0 0 0 1rpx rgba(255, 255, 255, 0.05);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		position: relative;
		overflow: hidden;
	}

	/* --- 左侧布局 --- */
	.rank-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	/* --- 排名徽章 --- */
	.rank-number-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64rpx;
		height: 64rpx;
		margin-right: 32rpx;
		border-radius: 50%;
		font-family: $font-digit;
		font-weight: 700;
		font-size: 36rpx;
		color: #fff;
		position: relative;
		z-index: 2;
	}

	.rank-number {
		line-height: 64rpx;
	}

	.rank-avar-box {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #2c3e50;
		border-radius: 50%;
		margin-right: 28rpx;
		border: 4rpx solid transparent;
		overflow: hidden;
	}

	.rank-avar {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		object-fit: cover;
		background-image: url('/static/public-images/user-avar.png');
		background-size: cover;
		background-position: center;
	}

	.rank-msg {
		display: flex;
		flex-direction: column;
	}

	.rank-name {
		color: #ffffff;
		font-weight: 600;
		font-size: 34rpx;
		line-height: 1;
	}

	.rank-id {
		margin-top: 6rpx;
		color: #8797d0;
		font-weight: 400;
		font-size: 26rpx;
		line-height: 1;
	}

	.rank-point {
		color: #66d9ef;
		font-family: $font-digit;
		font-weight: 700;
		font-size: 34rpx;
		width: 180rpx;
		text-align: right;
	}


	// 第一名：金色 + 发光特效
	.rank-list.first {
		background: rgba(255, 215, 0, 0.1);

		.rank-number-box {
			background: $gold-glow;
			color: #8b5a00;
			font-weight: 800;
		}

		.rank-name {
			color: #ffe135;
		}

		.rank-avar-box {
			border-color: #ffd700;
		}
	}

	// 第二名：银色
	.rank-list.second {
		background: rgba(192, 192, 192, 0.1);

		.rank-number-box {
			background: $silver-glow;
			color: #333;
		}

		.rank-name {
			color: #e0e0e0;
		}

		.rank-avar-box {
			border-color: #c0c0c0;
		}
	}

	// 第三名：铜色/橙焰
	.rank-list.third {
		background: rgba(255, 152, 0, 0.1);

		.rank-number-box {
			background: $bronze-glow;
			color: white;
		}

		.rank-name {
			color: #ffa726;
		}

		.rank-avar-box {
			border-color: #ff9800;
		}
	}

	// 普通排名
	.rank-list.common {
		.rank-number-box {
			background: $common-bg;
			color: #cbd5e1;
		}
	}
</style>